/** 优惠记录 */
<template>
  <div class="discount-page">
    <el-card shadow="always">
      <div slot="header">
        <line-header title="优惠券记录"></line-header>
      </div>
      <div class="card-body">
        <div class="body-top-box">
          <div class="top-left-box">
            <el-select v-model="selectDiscount" placeholder="优惠券类别">
              <el-option
                v-for="item in discountList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              class="select-status-box"
              v-model="selectStatus"
              placeholder="使用状态"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" @click="hkLoadList">筛选</el-button>
          </div>
          <div class="top-right-box">
            <el-button type="primary" plain>未使用优惠券：{{noUseNum}}张</el-button>
          </div>
        </div>
        <div class="card-table-box">
          <el-table
            v-loading="loading"
            :data="quanList"
            style="width: 100%"
            header-cell-class-name="header-cell-class-name"
            stripe
            border
          >
            <el-table-column prop="id" label="编号" align="center">
              <template slot-scope="scope">{{ pageSize*(currentPage-1)+ scope.$index+1 }}</template>
            </el-table-column>
            <el-table-column v-if="userInfo.role==1||userInfo.role==4" prop="receiveUser" label="用户名" align="center">
            </el-table-column>
            <el-table-column prop="amount" label="优惠券金额" align="center">
              <template slot-scope="{ row }">
                <div>{{row.amount*0.01+"元优惠券"}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="num" label="数量" align="center">
              <template slot-scope="{ row }">
                <div>1</div>
              </template>
            </el-table-column>
            <el-table-column v-if="userInfo.role==1||userInfo.role==4" prop="sendUser" label="发放人" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="发放时间" align="center">
              <template slot-scope="{ row }">
                <div>{{hkGetTimeFmt(row.createTime)}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="expireTime" label="到期时间" align="center">
              <template slot-scope="{ row }">
                <div>{{hkGetTimeFmt(row.expireTime)}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="useTime" label="使用时间" align="center">
              <template slot-scope="{ row }">
                <div>{{row.useTime>0?hkGetTimeFmt(row.useTime):"__"}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="stauts" label="使用状态" align="center">
              <template slot-scope="{ row }">
                <el-tag :type="tagStatus[row.status]">{{
                  usageStatus[row.status]
                  }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100]"
              :page-size="20"
              :total="total"
              layout=" prev, pager, next,sizes,jumper"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import LineHeader from "@/components/line-header/index";
  import {trace} from "../../../utils/trace"
  import {hkGetTimeFmt} from "../../../utils/tools"
  import {mapGetters} from "vuex"

  export default {
    components: {LineHeader},
    props: {},
    data() {
      return {
        loading:false,
        hkGetTimeFmt:hkGetTimeFmt,
        pageSize: 20,
        noUseNum: 0,
        currentPage: 1,
        total: 400,
        selectDiscount: "", //选中的优惠券类别，
        selectStatus: "",
        // 优惠券类别数据列表
        discountList: [
          {label: "优惠券类别", value: 8789324728947},
          {label: "10元优惠券", value: 10},
          {label: "20元优惠券", value: 20},
          {label: "30元优惠券", value: 30},
          {label: "40元优惠券", value: 40},
          {label: "50元优惠券", value: 50},
          {label: "60元优惠券", value: 60},
          {label: "70元优惠券", value: 70},
          {label: "80元优惠券", value: 80},
          {label: "90元优惠券", value: 90},
          {label: "100元优惠券", value: 100},
        ],
        statusList: [
          {label: "使用状态", value: 8789324728947},
          {label: "待使用", value: 1},
          {label: "已使用", value: 2},
          {label: "已过期", value: 3}
        ],
        usageStatus: {
          1: "待使用",
          2: "已使用",
          3: "已过期",
        },
        tagStatus: {
          1: "success",
          2: "success",
          3: "danger",
          4: "waring"
        },
        quanList: [
          // {
          //   serial: "00001",
          //   amount: "10元优惠券",
          //   num: "3",
          //   createrTime: "2017-10-31  23:12:00",
          //   expireTime: "2017-10-31  23:12:00",
          //   usageTime: "2017-10-31  23:12:00",
          //   status: 2
          // },
        ]
      };
    },
    watch: {},
    computed: {
      ...mapGetters(["userInfo"])
    },
    methods: {
      handleSizeChange(value) {
        this.pageSize = value;
        this.currentPage = 1;
        this.checkQuan();
      },
      handleCurrentChange(value) {
        this.currentPage = value;
        this.checkQuan();
      },
      hkLoadList(){     //筛选
        trace("loadlist-",this.selectDiscount,this.selectStatus);
        let page = this.currentPage;
        let count = this.pageSize;
        let direction = 1;    //排序方式
        let kind = this.selectDiscount;    //8789324728947;
        if(kind==""){kind = 8789324728947}
        else if(kind<200) kind = kind/10
        let status = this.selectStatus;
        if(status==""){
          status = 8789324728947
        }
        this.loading = true;
        this.$store.dispatch('finance/couponQuery', {page, count, direction, kind,status}).then((data) => {
          trace("checkQuan-查询优惠券-data", data);
          this.quanList = data.data;
          this.noUseNum = 0;
          this.quanList.map(item => {
            item.status = this.getStatus(item);
            //设置未使用数量
            // this.noUseNum += item.status == 1 ? 1 : 0;
          })
          this.total = data.total;
          this.noUseNum = data.pendingUseCount;
          this.loading = false;
        })
          .catch((err) => {
            trace("查询优惠券-hkClickSubmit-err", err)
            this.loading = false;
          })
      },
      // 查询优惠券
      checkQuan() {
        let page = this.currentPage;
        let count = this.pageSize;
        let direction = 1;    //排序方式
        let kind = 8789324728947;
        let status = 1;
        this.loading = true;
        this.$store.dispatch('finance/couponQuery', {page, count, direction, kind}).then((data) => {
          trace("checkQuan-查询优惠券-data", data);
          this.quanList = data.data;
          this.noUseNum = 0;
          this.quanList.map(item => {
            item.status = this.getStatus(item);
            //设置未使用数量
            // this.noUseNum += item.status == 1 ? 1 : 0;
          })
          this.total = data.total;
          this.noUseNum = data.pendingUseCount;
          this.loading = false;
        })
          .catch((err) => {
            trace("查询优惠券-hkClickSubmit-err", err)
            this.loading = false;
          })

      },

      getStatus(item){
        if(item.useTime>0){   //已经使用
          return 2;
        }else{
          if(item.isExpire){    //过期
            return 3;
          }else{
            return 1;           //待使用
          }
        }
      }
    },


    created() {
      this.checkQuan();
    },
    mounted() {
    }
  };
</script>
<style lang="scss" scoped>
  ::v-deep .header-cell-class-name {
    background: #ecf0f3;
  }

  .card-body {
    .body-top-box {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .top-left-box {
        .select-status-box {
          margin: 0 20px;
        }
      }
    }

    .card-table-box {
      margin-top: 30px;
    }
  }
</style>
